<template>

  <div class="refine_uploadCase_law">
    <h2 class="titleblue">{{title}}</h2>
    <div class="contant">
      <div class="middle-wrap">
        <el-row>
          <el-col>
            <label>标题</label>
            <el-input v-model="law.title" placeholder="请输入典型案例标题" class="select-width-310"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <label>典型案例分类</label>
            <div class="type-wrap input-box" v-if="law.typeradio==false||!law.typeradio">
              <el-select v-model="law.type" placeholder="请选择" class="select-width-210"
                         @change="selectChange($event)">
                <el-option v-for="(item,index) in typeFirstOptions" :key="index" :label="item.name" :value="item.id"
                           @click="abc(item)">
                </el-option>
              </el-select>
            </div>
            <el-col class="select-width-210" v-if="law.typeradio==true">
              <el-input v-model="law.type_name"></el-input>
            </el-col>
            <el-checkbox v-model="law.typeradio" @change="typeEdit" style="margin-left:10px">自定义</el-checkbox>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="vat">
            <label>关键字设置</label>
            <div class="input-box">
              <el-input v-for="(item,i) in law.keywords" :key="i" v-model="item.value" placeholder="关键字设置"
                        class="select-width-210"></el-input>

            </div>

            <span class="keyword-tip">（最多设置9个）</span>
            <el-button type="primary" class="blue-button" @click="addKeyword">添加</el-button>
          </el-col>
          <!-- 增加关键字 -->
          <!--<el-col v-for="(item,index) in inputArr" :key="index">-->
          <!--<label>&nbsp;</label>-->
          <!--<el-input  v-model="inputArr[index].value"  placeholder="关键字设置" class="select-width-210"></el-input>-->
          <!--</el-col>-->

          <el-col>
            <label>详情</label>
            <!--                     <el-input placeholder="请选择文档类的附件上传，例如doc和text" class="select-width-310"></el-input>
            <div class="por i-b">
                <el-button type="primary" class="blue-button">上传</el-button>
                <input type="file" class="file i-b" @change="uploadFile($event)">
            </div> -->
            <el-upload class="upload-demo" :action="$config.FILE_UPLOAD_URL" :data='uploadobj'
                       :on-preview="handlePreview"
                       :on-remove="uploadRemove"
                       :before-upload="beforeRemove" :limit="1" accept='.txt,.doc,.docx,.pdf' multiple
                       :on-success='uploadSuccess'
                       :on-exceed="handleExceed" :headers="headers" :file-list="fileList">
              <el-button type="primary" class="blue-button">上传</el-button>
              <div slot="tip" class="el-upload__tip">请选择文档类的附件上传，例如doc和text</div>
            </el-upload>
          </el-col>
          <el-col class="action-wrap">
            <el-button type="primary" @click="submit">发布</el-button>
            <el-button @click='cancel'>取消</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>

</template>

<script>
  import dictService from '@/services/DictionaryService.js'
  import * as lawsService from '@/services/LawsService.js'

  export default {
    props: ['member', 'lawTitle', 'lawData'],
    data: function () {
      return {
        law: {
          title: '',
          keywords: [{
            value: ''
          }],
          description: '',
          type: '',
          type_name: '',
          typeradio: false,
        },
        title: '',
        typeFirstOptions: [],
        uploadobj: {
          filename: '',
          mimeType: 'txt/doc/pdf',
          bus: 'law'
        },
        fileList: [],
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
        url: '',
        today: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
        // inputArr:[],//存放添加的关键字的数组
      }
    },
    watch: {
      // member: function () {
      //   this.clearLaw()
      //   this.edit()
      // },
      lawTitle: function (value) {
        if (value == 'addLaw') {
          this.title = '上传典型案例'
        } else if (value == 'editLaw') {
          this.title = '编辑典型案例'
        }
      }
    },
    async created () {
      // if (this.member) {
      //   this.edit()
      // }
      var value = this.lawTitle
      await this.getSelect()
      if (value == 'addLaw') {
        this.title = '上传典型案例'
      } else if (value == 'editLaw') {
        this.title = '编辑典型案例'
        this.getData()
      }
    },
    methods: {
      getData () {
        this.law.title = this.lawData.title
        if (this.lawData.dictionary) {
          this.law.type = this.lawData.dictionary.id
        } else {
          this.law.typeradio = true
          this.law.type_name = this.lawData.type
        }
        this.law.keywords = this.lawData.keywords.split(',').map(item => {
          return {value: item}
        })
        this.law.description = this.lawData.description
        this.url = this.lawData.url
        this.fileList.push({name: this.lawData.description, url: this.lawData.url})
      },
      selectChange (ele) {
      },
      getSelect () {
        dictService.find('DXAL').then(res => {
          this.typeFirstOptions = res.map(item => { // {name: item.name, value: item.id}
            return item
          })
        })
      },
      uploadSuccess (res) {
        // this.fileList.push({name: res.data.name}) // .substring(0, res.data.name.lastIndexOf('.'))
        this.url = res.data.link
        this.law.description = res.data.name // .substring(0, res.data.name.lastIndexOf('.'))
      },
      uploadRemove: function (res) {
        for (let i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].name == res.name) {
            this.fileList.splice(i, 1)
          }
        }
        this.url = ''
        this.law.description = ''
      },
      async submit () {
        if (this.law.title.length == 0) {
          this.$alert('请填写典型案例的标题', '提示')
          return false
        }
        if (this.law.description.length == 0) {
          this.$alert('请上传典型案例', '提示')
          return false
        }
        var keywordsArr = []
        for (var n of this.law.keywords) {
          keywordsArr.push(n.value)
        }
        var keywords = this.law.keywords.map(item => {
          if (item.value.trim()) {
            return item.value
          }
        }).join(',')
        var type, dictionary = null
        if (this.law.typeradio == false) {
          dictionary = await dictService.findOne(this.law.type).then(res => {
            if (res) return res
          })
          type = ''
          if (this.law.type.length == 0) {
            this.$alert('请选择分类')
            return false
          }
        } else {
          type = this.law.type_name
          if (this.law.type_name.length == 0) {
            this.$alert('请输入自定义分类')
            return false
          }
        }
        if (this.lawTitle == 'addLaw') {
          lawsService.create({
            code: 'DXAL',
            description: this.law.description,
            dictionary,
            keywords,
            publishTime: new Date(this.today),
            title: this.law.title,
            type,
            url: this.url
          }).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
              this.$emit('cl')
            }
          })
        } else if (this.lawTitle == 'editLaw') {
          lawsService.update({
            code: 'DXAL',
            description: this.law.description,
            dictionary,
            keywords,
            id: this.lawData.id,
            publishTime: new Date(this.today),
            title: this.law.title,
            type,
            url: this.url
          }).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$emit('cl')
            }
          })
        }
      },
      uploadFile (e) {
        let file = e.target.files[0]
      },
      upload (file) {
      },
      // 添加关键字
      addKeyword () {
        if (this.law.keywords.length > 8) {
          return
        }
        this.law.keywords.push({
          value: ''
        })
      },
      edit: function () {
        this.fileList = []
        this.law.title = this.member.title
        this.law.typeradio = this.member.type_name != '' ? true : false
        if (this.law.typeradio == true) {
          this.law.type_name = this.member.type_name
          this.law.type = ''
        } else {
          this.law.type = this.member.type
          this.law.type_name = ''
        }
        var keywords = this.member.keywords
        var keywordsArr = keywords.split(',')
        for (var n = 0; n < keywordsArr.length; n++) {
          if (n == 0) {
            this.law.keywords[n].value = keywordsArr[n]
          } else if (n > 0) {
            this.law.keywords.push({
              value: keywordsArr[n]
            })
          }
        }
        this.fileList.push({name: this.member.description})
      },
      clearLaw: function () {
        this.law = {
          title: '',
          keywords: [{
            value: ''
          }],
          type: '',
          type_name: '',
        }
        this.fileList = []
      },
      handlePreview (file) {
        window.open(file.url)
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file) {
        this.uploadobj.filename = file.name
        // this.uploadobj.busId = 1
        // var tpye = file.name.slice(file.name.lastIndexOf('.') + 1)
        // if (tpye == 'jpeg' || tpye == 'jpg' || tpye == 'png') {
        //   this.uploadobj.mimeType = 'image/jpeg'
        // } else if (tpye == 'doc' || tpye == 'docx') {
        //   this.uploadobj.mimeType = 'application/msword'
        // } else if (tpye == 'pdf') {
        //   this.uploadobj.mimeType = 'application/pdf'
        // } else if (tpye == 'txt') {
        //   this.uploadobj.mimeType = 'text/plain'
        // }
        // this.uploadobj.filename = file.name
        return true
      },
      cancel () {
        this.$emit('cl')
      },
      typeEdit () {
        this.law.type = ''
        this.law.type_name = ''
      }
    }
  }
</script>

<style lang="scss">
  .refine_uploadCase_law .contant {
    padding-bottom: 20px
  }

  .refine_uploadCase_law .contant .middle-wrap {
    width: 550px;
    margin: 0 auto
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .el-col label {
    display: inline-block;
    width: 100px;
    text-align: right;
    line-height: 40px;
    margin-bottom: 10px;
    margin-right: 10px;
    float: left
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .el-col .select-width-310 {
    width: 350px
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .el-col .select-width-210 {
    width: 210px
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .el-col .type-wrap {
    float: left
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .el-col .el-button {
    width: 58px;
    margin-left: 10px
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .el-col .keyword-tip {
    display: inline-block;
    width: 95px;
    text-align: center;
    font-size: 12px;
    line-height: 40px
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .el-col .file {
    width: 58px;
    height: 40px;
    position: absolute;
    left: 10px;
    top: 0;
    opacity: 0
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .action-wrap {
    text-align: center;
    margin-top: 20px
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .action-wrap .el-button {
    width: 110px;
    margin: 0 10px
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .uploadInfo .name {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .refine_uploadCase_law .contant .middle-wrap .el-row .uploadInfo .del {
    color: red;
    cursor: pointer
  }

  .refine_uploadCase_law .contant .vat > * {
    vertical-align: top
  }

  .refine_uploadCase_law .contant .input-box {
    display: inline-block;
    width: 210px
  }

  .refine_uploadCase_law .contant .input-box .el-input {
    margin-bottom: 10px
  }

  .refine_uploadCase_law .el-upload__tip {
    width: 300px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #ddd;
    float: left;
    margin-top: 0;
    padding: 0 15px;
    font-size: 14px;
    color: #b9b9b9;
    text-align: left;
    line-height: 40px
  }

  .refine_uploadCase_law .el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: block;
    margin-top: 28px;
    margin-top: -5px
  }

  .refine_uploadCase_law .el-upload-list__item:first-child {
    margin-top: 0
  }

  .refine_uploadCase_law .el-upload--text {
    float: right;
    width: 58px;
    height: 40px;
    border: none;
    border-radius: 2px;
    margin-left: 5px
  }

  .refine_uploadCase_law .el-upload--text button {
    background-color: #0062cd;
    border-radius: 2px;
    border: none;
    padding: 0;
    width: 58px;
    height: 40px;
    margin-left: 0 !important
  }

  .refine_uploadCase_law .upload-demo {
    width: 364px;
    display: inline-block;
    float: left
  }
</style>
